import { observer, useLocalStore } from 'mobx-react'
import React, { useEffect } from 'react'
import { FlatList, StyleSheet, Text, View } from 'react-native'
import HomeStore from '../../store/HomeStore'
import FlatListItem from './components/FlatListItem'
import FlowList from '../../components/flowlist/FlowList.js';
import * as _ from 'lodash'
import TitleBar from './components/TitleBar'


// 使用 observer 监听数据的变化
export default observer(function Home() {

  const store = useLocalStore(() => new HomeStore())

  useEffect(() => {
    store.requestHomeList()
  }, [])

  const refreshNewData = () => {
    console.log('上拉刷新');
    store.resetPage();
  }



  const loadMoreData = () => {
    store.requestHomeList()
  }


  const Footer = () => {
    return (
      <Text style={styles.footerTxt}>没有更多数据啦！~</Text>
    );
  }



  return (
    <View style={styles.root}>
      <TitleBar />


      {/* FlatList 没有瀑布流的效果  封装的组件 FlowList 有瀑布流 */}
      <FlowList
        style={styles.flatListLayout}
        data={store.homeList}
        renderItem={FlatListItem}
        numColumns={2}
        keyExtractor={(item: ArticleSimple) => `${item.id}`}
        extraData={[store.refreshing]}
        refreshing={store.refreshing}
        onEndReached={loadMoreData}
        onRefresh={refreshNewData}
        onEndReachedThreshold={0.4}
        ListFooterComponent={<Footer />}
      >

      </FlowList>
    </View>
  )
})
const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
    flexDirection: "column"
  },
  flatListLayout: {
    width: '100%',
    height: "100%",
    backgroundColor: "#f0f0f0",
  },
  footerTxt: {
    width: '100%',
    fontSize: 14,
    color: '#999',
    marginVertical: 12,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
})